import React, { useState, useCallback } from "react";
import LevelOne from "./LevelOne";

export default function MyFuncComp() {
  const [num, setNum] = useState(0);
  const [msg, setMsg] = useState(0);
  // 使用 useCallback，num 不变时始终返回同一个函数地址
  const handleChildrenClick = useCallback(() => {
    setNum(num + 1);
  }, [num]);
  // MyFuncComp 重新渲染时打印一下
  console.log("MyFuncComp Render");
  return (
    <div
      style={{
        backgroundColor: "skyblue",
      }}
    >
      <h1>MyFuncComp</h1>
      {/* 点击 button 时更新 msg 的值 */}
      <button
        onClick={() => {
          setMsg(msg + 1);
        }}
      >
        msg 改变
      </button>
      {/* 显示 msg 的值 */}
      <p>msg: {msg}</p>
      <LevelOne num={num} onClick={handleChildrenClick} />
    </div>
  );
}
